<template>
  <div class="home">
    <div class="home-head-per">
      <div class="home-head">
        <span>首页</span>
      </div>
      <div class="home-head-content">
        <div class="head-content-name">您好！{{getH5Name()}}<span>({{getH5Username()}})</span></div>
        <div class="head-content-info">
          <p>登录日期：{{today}}</p>
          <!-- <p>账套：[005]广州市XX区教育局(收支业务)</p> -->
        </div>
      </div>
    </div>
    <van-grid class="home-content-list" :column-num="2">
      <!--icon="photo-o" text="我要报账"-->
      <van-grid-item @click="expensesBtn">
        <van-icon class-prefix="iconfont icon-baoxiao" size="2rem" color="#1989fa"  />
        <span>我要报账</span>
      </van-grid-item>
      <!-- <van-grid-item>
        <van-icon class-prefix="iconfont icon-dkw_jiekuan" size="2rem" color="#d3c60f" />
        <span>我要借款</span>
      </van-grid-item> -->
      <van-grid-item @click="gotoApproveOrder">
        <van-icon class-prefix="iconfont icon-shenpi" size="2rem" color="#0fdb4c" />
        <span>我的审批</span>
      </van-grid-item>
    </van-grid>

    <div class="home-content-link">
      <van-cell-group>
        <van-cell is-link to="/h5_todo">
          <template #title>
            <van-icon class-prefix="iconfont icon-ERP_daiban" size="1.25rem" color="#d3c60f" />
            <van-badge :content="approveOrderToNum" :offset="[11,8]">
              <span class="custom-title">审批待办</span>
            </van-badge>
            
          </template>
        </van-cell>
        <van-cell is-link to="/h5_reimbursement">
          <template #title>
            <van-icon class-prefix="iconfont icon-wodebaoxiaodan" size="1.25rem" color="#d3c60f" />
            <span class="custom-title">报账单</span>
          </template>
        </van-cell>
        <!-- <van-cell is-link to="/h5_home">
          <template #title>
            <van-icon class-prefix="iconfont icon-jiekuandan" size="1.25rem" color="#d3c60f" />
            <span class="custom-title">借款单</span>
          </template>
        </van-cell> -->
        <!-- <van-cell is-link to="/">
          <template #title>
            <van-icon class-prefix="iconfont icon-dkw_jiekuan" size="1.25rem" color="#d3c60f" />
            <span class="custom-title">定制业务</span>
          </template>
        </van-cell>
        <van-cell is-link to="/">
          <template #title>
            <van-icon class-prefix="iconfont icon-dkw_jiekuan" size="1.25rem" color="#d3c60f" />
            <span class="custom-title">微信工资</span>
          </template>
        </van-cell> -->
      </van-cell-group>
    </div>
    <tabBar :routeActive="0"></tabBar>
  </div>
</template>


<script setup>
  import tabBar from '@/h5/components/tabbar.vue';
  // import selectKpiList from '@/h5/components/selectKpiList.vue';
  import {parseTime} from "@/utils/ruoyi";
  import useUserStore from '@/store/modules/user';
  import { useRouter } from "vue-router";
  import {doGet} from '@/config/http'
  import {svc} from '@/config/common'
  import {getH5UserId, getH5Username, getH5Name} from "@/config/cookie";
  const today = parseTime(new Date().getTime(), '{y}-{m}-{d}');//new Date().pattern("yyyy年MM月dd日"),
  const router = useRouter();
  const userStore = useUserStore();
  console.log('userStore',userStore.username)
  let approveOrderToNum = ref(null)
  let kpiVisible = ref(false)
  let currentUserId = getH5UserId()
  console.log("currentUserId=>",currentUserId)
  function expensesBtn() {
    router.push({path: '/h5_expenses', query: {oper: 'add'}})
  }

  function gotoApproveOrder() {
    router.push('/h5_approveOrder')
  }

  const approveOrder = async () => {
    let  res = await doGet(svc, '/approve-order-tobe/page', {receiveUserId: currentUserId, approveOrderTobeType: "1", state: "1"}, true)
    approveOrderToNum.value = parseInt(res['total'])
  }
  approveOrder()
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.home-head-per {
  width: 100%;
  overflow: hidden;
}
.home-head {
  width: 100%;
  height: 8rem;
  // background: var(--van-primary-color);
  background-color: #dfc059;
  text-align: center;
  overflow: hidden;
  & span {
    display: inline-block;
    color: #fff;
    font-size: 1.25rem;
    margin-top: 1.25rem;
  }
}
.home-head-content {
  width: 80%;
  // height: 8rem;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 4rem;
  margin-left: -40%;
  box-shadow:0 0 12px var(--van-gray-5);
  padding: .625rem;
  .head-content-name {
    color: black;
    font-weight: 500;
    font-size: 1.2rem;
    & span {
      color: var(--van-gray-6);
    } 
  }
  .head-content-info {
    color: var(--van-gray-6);
    margin-top: .3125rem;
  }
}
.home-content-list {
  margin-top: 5.625rem;
  // width: 100%;
  // padding: 1.25rem 0;
  // margin-top: 5.625rem;
  // background: #fff;
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
.home-content-list span {
  color: var(--van-primary-color);
}
.home-content-link {
  margin-top: 1.25rem;
}
.custom-title {
  padding-left: .9375rem;
  color: var(--van-primary-color);
  font-size: 1rem;
}
.home-content-link .van-cell {
  padding: 1.25rem .9375rem;
}

</style>

